<template>
  <div>
    <!-- 头部 -->
    <router-link to="/hotel">
      <van-nav-bar left-arrow />
    </router-link>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="搜索目的地/酒店" />
    <!-- 国内国际 -->

    <van-tabs v-model="activeName">
      <van-index-bar :sticky="false" highlight-color="#ffba33">
        <!-- 国内开始 -->
        <van-tab title="标签 1" name="guonei">
          <van-index-anchor :index="name" v-for="(item, name) in cities" :key="name">
            <b>{{ name }}</b>
          </van-index-anchor>
        </van-tab>
        <!-- 国内结束 -->
        <van-tab title="标签 2" name="guowai">内容 2</van-tab>
      </van-index-bar>
    </van-tabs>

    <!-- <van-index-anchor index="A">A</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />

    <van-index-anchor index="B">B</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="C">C</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="D">D</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="E">E</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="F">F</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="G">G</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="H">H</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="J">J</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="K">K</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-index-anchor index="L">L</van-index-anchor>
    <van-cell title="文本" />
    <van-cell title="文本" />
    <van-cell title="文本" />-->
    <!-- 通过字母查找 -->
    <!-- <van-index-bar sticky="true" highlight-color="#ffba33">
      <van-index-anchor index="A">A</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />

      <van-index-anchor index="B">B</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar>-->
  </div>
</template>

<script>
import { IndexBar, IndexAnchor } from "vant";
import { Tab, Tabs } from "vant";
export default {
  components: {
    IndexBar,
    IndexAnchor,
    Tab,
    Tabs,
  },
  data() {
    return {
      activeName: "guonei",
      FirstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      cities: {},
      search: "",
    };
  },
  methods: {
    //  提取
    data() {
      let cityName = {};
      //循环26个字母的数组
      this.FirstPin.forEach((item) => {
        cityName[item] = [];
        cities.forEach((el) => {
          //对比开头字母是否对应
          let first = el.pinyin.substring(0, 1).toUpperCase();
          if (first == item) {
            cityName[item].push(el);
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.van-nav-bar {
  width: 10%;
}
.van-search {
  width: 90%;
  position: absolute;
  right: 0;
  top: 0;
}
.van-index-bar__index {
  padding: 4px;
}
</style>
